<template>
  <div>
    <!-- el-tree
                data:树形数据
                props:{
                    label:'label',
                    children:'children'
                }
                作用域插槽（插槽上传参）
                   默认插槽：替换当前的树形内容
                      node:组件内提供给我们的参数，特殊场景时可以使用
                      data:当前项的数据

  需求：
       广东
          深圳
             宝安
          广州
         -->
    <el-tree :data="treeData" :props="{ label: 'name', children: 'child' }">
      <template v-slot="{ data }">
        <div class="content">
          <span class="t1">{{ data.name }}</span>
          <span>管理员</span>
          <span>操作</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '广东',
          child: [{ name: '深圳', child: [{ name: '宝安' }] }, { name: '广州' }]
        }
      ]
    }
  },
  methods: {
    btnClick(node, data) {
      console.log(node, data)
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  width: 100%;
  .t1 {
    flex: 1;
  }
}
</style>
